<template>
    <PanelBox :image="image">
        <div class="monitoring-equipment-box">
            <div class="monitoring-equipment-box-top">
                <div class="flex-box left-box">
                    <div></div>
                    <span>正常</span>
                </div>
                <div class="flex-box center-box">
                    <div></div>
                    <span>闲置</span>
                </div>
                <div class="flex-box right-box">
                    <div></div>
                    <span>损坏</span>
                </div>
            </div>
            <div class="echarts-big-box">
                <MonitoringPie
                    v-for="(item, index) in dataList"
                    :key="index"
                    class="echarts-collect-box"
                    :data="item.pieData"
                    :title="item.title"
                />
            </div>
        </div>
    </PanelBox>
</template>

<script>
import PanelBox from "@/component/PanelBox";
import MonitoringPie from "./component/MonitoringPie";
import { FetchGetTailingSensorStatistics } from "@/api";

export default {
    name: "MonitoringEquipment",

    components: {
        PanelBox,
        MonitoringPie,
    },

    props: {
        image: {
            type: String,
            default() {
                return "";
            },
        },
    },

    data() {
        return {
            dataList: [],
            // dataList: [
            //     {
            //         pieData: [
            //             {
            //                 name: "正常",
            //                 value: 35,
            //             },
            //             {
            //                 name: "损坏",
            //
            //                 value: 25,
            //             },
            //             {
            //                 name: "闲置",
            //                 value: 4,
            //             },
            //         ],
            //         title: "表面位移",
            //     },
            //     {
            //         pieData: [
            //             {
            //                 name: "正常",
            //                 value: 11,
            //             },
            //             {
            //                 name: "损坏",
            //                 value: 5,
            //             },
            //             {
            //                 name: "闲置",
            //                 value: 3,
            //             },
            //         ],
            //         title: "内部位移",
            //     },
            //     {
            //         pieData: [
            //             {
            //                 name: "正常",
            //                 value: 5,
            //             },
            //             {
            //                 name: "损坏",
            //                 value: 3,
            //             },
            //             {
            //                 name: "闲置",
            //                 value: 2,
            //             },
            //         ],
            //         title: "干滩长度",
            //     },
            //     {
            //         pieData: [
            //             {
            //                 name: "正常",
            //                 value: 20,
            //             },
            //             {
            //                 name: "损坏",
            //                 value: 12,
            //             },
            //             {
            //                 name: "闲置",
            //                 value: 1,
            //             },
            //         ],
            //         title: "浸润线",
            //     },
            // ],
        };
    },

    created() {
        this.refreshList();
    },

    methods: {
        refreshList() {
            FetchGetTailingSensorStatistics().then((res) => {
                this.dataList = res.map((item) => ({
                    title: item.typeName,
                    pieData: [
                        { name: "正常", value: item.usedCount },
                        { name: "闲置", value: item.unusedCount },
                        { name: "损坏", value: item.damagedCount },
                    ],
                }));
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.monitoring-equipment-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .monitoring-equipment-box-top {
        width: 100%;
        height: 0.12rem;
        display: flex;
        justify-content: center;
        align-items: center;
        .flex-box {
            width: .36rem;
            height: 0.07rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;
            font-size: .07rem;
            margin: 0 .06rem;
            div {
                width: .13rem;
                height: .07rem;
                border-radius: .015rem;
            }
        }
        .left-box {
            div {
                background: #00ffff;
            }
        }
        .center-box {
            div {
                background: #fff;
            }
        }
        .right-box {
            div {
                background: #ff2222;
            }
            span{
                font-size: .06rem;
            }
        }
    }

    .echarts-big-box {
        width: 100%;
        height: 1.1rem;
        overflow: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        .echarts-collect-box {
            width: 48%;
            height: 49%;
        }
        &::-webkit-scrollbar {
            width: .03rem;
            border-radius: .02rem;
        }
        &:hover::-webkit-scrollbar-thumb {
            background: linear-gradient(to bottom, rgb(0, 254, 255), rgb(29, 144, 244));
            border-radius: .02rem;
        }

        &:hover::-webkit-scrollbar-track {
            background: rgba(30, 140, 244, 0.35);
            border-radius: .02rem;
        }
    }
}
</style>
